<template>
  <div id="app">
    <!-- <transition name="rotate"> -->
      <router-view class="router_container"/>
    <!-- </transition> -->
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.router_container
{
  width: 100%;
  height: 100vh;
  position:absolute;
  left: 0px;
  top: 0px;
}

.rotate-enter
{
  transform: translate(100%);
  /* left: 0px; */
}

.rotate-enter-active
{
  transition: all 2s;
}

.rotate-enter-to
{
  transform: translate(0%);
}

.rotate-leave
{
  transform: translate(0%) rotate(0deg);
}

.rotate-leave-active
{
  transition: all 2s;
  transform-origin: left;
}

.rotate-leave-to
{
  transform: translate(-50%) rotate(180deg) scale(0);
  /* transform:translate(-100%) */
}

</style>
